<template>
  <div class="sell-card">
    <div class="sell-card-centent">
      <div class="sell-heads" @click="headsFun">
        <img :src="headImg" alt="">
      </div>
      <div class="sell-text">
        <div>单价:<span>{{price}}</span></div>
        <div>总数量:<span>{{total}}</span>锁定:<span>{{locks}}</span></div>
      </div>
    </div>
    <div class="sell-card-btn">
      <div @click="routeFun">{{hang?'卖出':'买入'}}</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  //接收父级传递的参数
  props: {
    price: {
      type: [String, Number],
      default: 0
    },
    total: {
      type: [String, Number],
      default: 0
    },
    locks: {
      type: [String, Number],
      default: 0
    },
    hang: {
      type: Boolean,
      default: false
    },
    to:{
      type:String,
      default:''
    },
    headImg:String,
    default:""
  },
  //监听数据变化
  watch: {},
  data() {
    return {};
  },
  //实例初始化之前触发事件
  beforeCreate() {},
  //实例化之后触发事件
  created() {},
  //实时监控data参数数据变化
  computed: {},
  //模板组件
  components: {},
  //执行方法
  methods: {
    routeFun() {
      if (!this.to) {
        return;
      }
      this.$router.push(this.to);
    },
    headsFun(){
      this.$emit('head-Click')
    }
  },
  mounted() {}
  //路由退出时候调用
  //beforeRouteLeave(to, from, next){next()}
};
</script>

<style scoped lang="less">
.sell-card{
   display: flex;
   justify-content:space-between;
   padding:1rem 1rem;
   align-items: center;
   border-bottom: 1px solid #f3f3f3;
  .sell-card-centent{
     display: flex;
     justify-content: flex-start;
    .sell-heads{
      width: 3.75rem;
      height: 3.75rem;
      border-radius: 50%;
      background: #000;
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .sell-text{
      display: flex;
      flex-direction:column;
      justify-content: space-around;
      margin-left:1rem;
      font-size: 0.875rem;
      span{
        display: inline-block;
        margin: 0 0.5rem;
      }
    }
  }
  .sell-card-btn{
     &>div{
       width: 3.75rem;
       height:1.5625rem;
       border:1px solid #4f89fe;
       border-radius: 4px;
       text-align: center;
       line-height: 1.5625rem;
       color:#4f89fe;

     }
  }
}
</style>
